<template>
	<view class="u-p-t-60 u-p-r-60 u-p-b-30 u-p-l-60 logincontainer">
		<button class="avatarwrap" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<!-- <u-avatar size="140" src="" mode="circle"></u-avatar> -->
		<u-form class="forms" :model="loginModel" ref="form1">
			<u-form-item left-icon="account-fill" left-icon-style="font-size:21px;color:#FF7670"><u-input
					placeholder="请输入账户" v-model="loginModel.username"></u-input></u-form-item>

			<u-form-item left-icon="account-fill" left-icon-style="font-size:21px;color:#FF7670"><u-input
					placeholder="请输入电话" v-model="loginModel.username"></u-input></u-form-item>

			<u-form-item left-icon="lock" left-icon-style="font-size:21px;color:#FF7670"><u-input placeholder="请输入密码"
					v-model="loginModel.password"></u-input></u-form-item>
			<u-form-item left-icon="lock" left-icon-style="font-size:21px;color:#FF7670"><u-input placeholder="确定密码"
					v-model="loginModel.password"></u-input></u-form-item>
			<view class="passtext">
				已有账号，去登录
			</view>

			<u-button :custom-style="customStyle1">登录</u-button>


		</u-form>
	</view>
</template>

<script setup>
	import {
		reactive, 
		ref
	} from 'vue';
	import color from '../../uni_modules/vk-uview-ui/libs/function/color';
	const loginModel = reactive({
		username: '',
		password: ''
	})
	const customStyle1 = reactive({
		marginTop: '20px',
		background: '#FF7670',
		color: '#FFF',
		width: '100%',

	})
	const customStyle2 = reactive({
		marginTop: '20px',
		width: '100%',

	})
	const onChooseAvatar = (e)=>{
		
	}
	const avatarUrl =ref('/static/user.jpg')
</script>

<style lang="scss">
	.logincontainer {
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.forms {
		width: 100%;
	}

	.passtext {
		display: flex;
		justify-content: flex-end;
		color: #FF7670;
		margin-top: 15px;
	}
	.avatarwrap{
		border-radius:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70px;
		width: 70px;
		padding: 0px;
		.avatar{
			border-radius:100%;
			height: 70px;
			width: 70px;
		}
	}
</style>